<template>
  <div class="fullMain" style="max-height: calc(100% - 50px);overflow: scroll;">
    <x-header :left-options="{backText: '',showBack: back}">
      {{titleType}}填写
    </x-header>
    <!--插入验证提示框-->
    <div v-transfer-dom>
      <alert v-model="isShowAlert"> {{alertText}}</alert>
    </div>
    <div style="height:20px"/>
    <div class="mainbBg">
      <div class="menuHeader" style="height: 30px;box-sizing: border-box">
<!--        <i class="fa fa-chevron-left mT returnIcon" @click="back"></i>-->
        <button class="specialBtn my_submit head_button" style="float: right;margin-right: 15px;margin-top: 5px"
                @click="toView">查看
        </button>
      </div>
    </div>

    <div class="week_list items" style="font-weight: bold;width: 21em;padding-bottom: 5px" v-show="isShowWeekList">
      <p>这是{{editDate.year}}年{{editDate.month}}月的：</p>
      <label for="01"><input name="week" type="radio" value="" id="01" class="seqWeek"/>第一周 </label>
      <label for="02"><input name="week" type="radio" value="" id="02" class="seqWeek"/>第二周 </label>
      <label for="03"><input name="week" type="radio" value="" id="03" class="seqWeek"/>第三周 </label>
      <label for="04"><input name="week" type="radio" value="" id="04" class="seqWeek"/>第四周 </label>
    </div>

    <ul class="items" style="width:80%">
      <div class="item_title">学术类</div>
      <li>
        <p>发表论文：共计<input v-model="academic.paperNum" class='review_number' type="textarea" placeholder='默认0'></input>篇
        </p>
        <p>名称：<input v-model="academic.paperName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
      <li>
        <p>申请专利：共计<input v-model="academic.patentNum" class='review_number' type="textarea" placeholder='默认0'></input>篇
        </p>
        <p>名称：<input v-model="academic.patentName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
      <li>
        <p>撰写申报书：共计<input v-model="academic.declarationNum" class='review_number' type="textarea"
                          placeholder='默认0'></input>个</p>
        <p>名称：<input v-model="academic.declarationName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
      <li>
        <p>论文分享：共计<input v-model="academic.paperShare" class='review_number' type="textarea" placeholder='默认0'></input>次
        </p>
      </li>
    </ul>
    <ul class="items clear_list_style" style="width:80%">
      <div class="item_title" style="display: flex">工程类</div>
      <div v-if="this.project.projectSems">
        <div v-for="(item,index) in this.project.projectSems" :key="index" class="projectItem">
          <popover class="moreFun" placement="left">
            <div slot="content" class="popover-demo-content"
                 style="background-color: white;border: 1px gray solid;padding: 8px;">
              <span @click="modifyMemory(item)" style="line-height: 30px; padding: 8px;">修&nbsp;改</span><br>
              <span @click="deleteMemory(item)" style="line-height: 30px;padding: 8px;">删&nbsp;除</span>
            </div>
            <button class="btn btn-default">
              <i class="fa fa-ellipsis-v"></i>
            </button>
          </popover>
          <p>项目名称{{index+1}}：{{item.projectName}}</p>
          <p>代码量：{{item.projectCode}}行</p>
          <p>有效工作：{{item.effectiveWork}}</p>
          <p>时间消耗（h）与项目成效：<br> {{item.effect}}</p>
        </div>
      </div>
      <li id="project">
        <p>项目名称：<input v-model="projectItem.projectName" class='review_context' type="textarea" placeholder=''></input>
        </p>
        <p>代 码 量：<input v-model="projectItem.projectCode" class='review_number' type="textarea"
                        placeholder='默认0'></input>
        </p>
        <p>有效工作：<input v-model="projectItem.effectiveWork" class="review_context" type="textarea"
                       placeholder='请填写具体内容'></input></p>
        <p>时间消耗（h）与项目成效：<br> <input v-model="projectItem.effect" class="review_context" type="textarea"
                                    placeholder=''></input>
        </p>
      </li>
      <div>
        <button type="button" class="specialBtn my_submit" style="width:auto;margin-right: 20px;margin-left: 5px;"
                @click="checkCurrent">新增项目
        </button>
        <button type="button" class="specialBtn my_submit" style="width:auto;margin-right: 20px;margin-left: 5px;"
                @click="clearProject">清空内容
        </button>
      </div>
      <li>
        <p>软件著作：共计<input v-model="project.softwareRight" class='review_number' type="textarea"
                         placeholder='默认0'></input>个</p>
      </li>
      <li>
        <p>参与比赛：共计<input v-model="project.gameNum" class='review_number' type="textarea" placeholder='默认0'></input>次</p>
        <p>名称：<input v-model="project.gameName" class="review_context" type="textarea" placeholder='多个请用“，”隔开'></input>
        </p>
      </li>
      <li>
        <p>技术分享：共计<input v-model="project.skillShare" class='review_number' type="textarea" placeholder='默认0'></input>次
        </p>
      </li>
    </ul>
    <ul class="items" style="width:80%">
      <div class="item_title">事务类</div>
      <li>
        <p>负责采购：共计<input v-model="item.procurementNum" class='review_number' type="textarea" placeholder='默认0'></input>项
        </p>
        <p>名称：<input v-model="item.procurementName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
      <li>
        <p>固定资产管理：共计<input v-model="item.fixedAssetsNum" class='review_number' type="textarea"
                           placeholder='默认0'></input>项</p>
        <p>名称：<input v-model="item.fixedAssetsName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
      <li>
        <p>实验室活动策划：共计<input v-model="item.labActivityPlan" class='review_number' type="textarea"
                            placeholder='默认0'></input>项</p>
      </li>
      <li>
        <p>其它管理：共计<input v-model="item.managementNum" class='review_number' type="textarea" placeholder='默认0'></input>项
        </p>
        <p>名称：<input v-model="item.managementName" class="review_context" type="textarea"
                     placeholder='多个请用“，”隔开'></input></p>
      </li>
    </ul>
    <ul class="items" style="width:80%">
      <div class="item_title" style="padding-left: 20%">学习类总结/心得感悟</div>
      <!--        <textarea autofocus rows="3" v-model="academic.feeling"></textarea>-->
      <textarea rows="3" v-model="academic.feeling"></textarea>
    </ul>
    <div>
      <button class="specialBtn my_submit" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
  import {XHeader, Popover} from 'vux'
  import {mapState} from 'Vuex'
  import year from 'api/year'

  export default {
    name: 'S_annual_review',
    data () {
      return {
        oldData: [],//存放待修改的数据
        titleType: '',//动态标题
        type: '',//存储填写的类型:年月周
        nullFlag: '', // 字符串输入是否为空标志
        projectItem: {// 暂存一个项目信息
          effect: '',// 工作成效
          effectiveWork: '', // 有效工作
          id: '',
          proId: '',
          projectCode: '',
          projectName: '',
        }, // 暂存当前已添加的项目
        comReview: {},
        modifyFlag: false,
        oldResult: '',
        isShowAlert: false, // 是否显示验证提示框
        alertText: '',
        academic: {
          declarationName: '', // 申报书
          declarationNum: '',
          feeling: '',
          paperName: '',
          paperNum: '',
          paperShare: '',
          patentName: '', // 专利
          patentNum: '',
        },
        project: {
          gameName: '', // 比赛
          gameNum: '',
          projectSems: [], // 暂存当前已添加的项目
          skillShare: '',
          softwareRight: '', // 软件著作
        },
        item: {
          fixedAssetsName: '', // 固定资产管理
          fixedAssetsNum: '',
          labActivityPlan: '', // 实验室活动策划
          managementName: '', // 管理
          managementNum: '',
          procurementName: '', // 采购
          procurementNum: '',
        },
        userId: '',
        date: '',
        reportType: '',
        editDate: {
          year: '',
          month: '',
          flag: '',//用于设置为填写类型的标志，01-04为周报，05为月报，年报任意都可（因为年报 不查看本数据）
        },
        detail: {
          academic: {},
          item: {},
          project: {},
        },
        isShowWeekList: false,//控制选择周div的显示
      }
    },
    watch: {
      'projectSems.projectName' () {
        this.checkNull(this.projectItem.projectName)
      },
      'projectSems.projectCode' () {
        this.checkType(this.projectItem.projectCode)
      },
      'projectSems.effectiveWork' () {
        this.checkNull(this.projectItem.effectiveWork)
      },
      'projectSems.effect' () {
        this.checkNull(this.projectItem.effect)
      },

      'academic.paperNum' () {
        this.checkType(this.academic.paperNum)
      },
      'academic.patentNum' () {
        this.checkType(this.academic.patentNum)
      },
      'academic.declarationNum' () {
        this.checkType(this.academic.declarationNum)
      },
      'academic.paperShare' () {
        this.checkType(this.academic.paperShare)
      },
      'academic.feeling' () {
        this.checkNull(this.academic.feeling)
      },
      'project.projectSems' () {
      },
      'project.softwareRight' () {
        this.checkType(this.project.softwareRight)
      },
      'project.gameNum' () {
        this.checkType(this.project.gameNum)
      },
      'project.skillShare' () {
        this.checkType(this.project.skillShare)
      },

      'item.procurementNum' () {
        this.checkType(this.item.procurementNum)
      },
      'item.managementNum' () {
        this.checkType(this.item.managementNum)
      },
      'item.fixedAssetsNum' () {
        this.checkType(this.item.fixedAssetsNum)
      },
      'item.labActivityPlan' () {
        this.checkType(this.item.labActivityPlan)
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['reviewType', 'reviewItem'])
    },
    components: {
      XHeader,
      Popover,
    },
    mounted () {
      this.renderInit()
    },
    methods: {
      modifyMemory (item) {
        const index = this.project.projectSems.indexOf(item)
        this.projectItem.projectName = item.projectName
        this.projectItem.projectCode = item.projectCode
        this.projectItem.effectiveWork = item.effectiveWork
        this.projectItem.effect = item.effect
        this.project.projectSems.splice(index, 1)
      },
      deleteMemory (item) {
        const index = this.project.projectSems.indexOf(item)
        this.project.projectSems.splice(index, 1)
      },
      saveItem () {
        if (typeof (this.projectItem.projectCode) === 'string') {
          this.projectItem.projectCode = this.projectItem.projectCode.replace(/[^0-9]/ig, '')
        }
        let temp = {}
        temp.projectName = this.projectItem.projectName
        temp.projectCode = this.projectItem.projectCode
        temp.effectiveWork = this.projectItem.effectiveWork
        temp.effect = this.projectItem.effect
        this.project.projectSems.push(temp)
        this.clearProject()
      },
      clearProject () {
        this.projectItem.projectName = ''
        this.projectItem.projectCode = ''
        this.projectItem.effectiveWork = ''
        this.projectItem.effect = ''
      },
      checkType (s) {
        // console.log(s)
        if (s === '' || s === undefined) {
        } else {
          let num = Number(s) // 将字符串转换为数字
          if (isNaN(num)) {
            this.showAlert('请输入阿拉伯数字')
          }
        }
      },
      checkNull (s) {
        this.nullFlag = true
        if (s === '' || s === undefined) {
          // this.showAlert(s+'不允许为空')
          // return true
        } else {
          this.nullFlag = false
        }
        return this.nullFlag
      },
      checkCurrent () {
        if (!this.checkNull(this.projectItem.projectName) && !this.checkNull(this.projectItem.projectCode) &&
          !this.checkNull(this.projectItem.effectiveWork) && !this.checkNull(this.projectItem.effect)) {
          this.saveItem()
          return true

          //  提交的时候不用验证全部是否为空，但我把新增和提交的验证都合到这里了，所以需要改一下
        } else if (this.checkNull(this.projectItem.projectName) && this.checkNull(this.projectItem.projectCode) &&
          this.checkNull(this.projectItem.effectiveWork) && this.checkNull(this.projectItem.effect)) {
          this.showAlert('请完整填写项目信息')
          return false
        } else {
          this.showAlert('请完整填写项目信息')
          return false
        }
      },
      toView () {
        this.$store.commit('recordReviewItem', '')
        this.$router.push({name: 'S_view_annual_review'})
      },
      back () {
        this.$router.go(-1)
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      // 关闭验证提示框
      closeTip () {
        // console.log('关闭验证提示框')
        this.isShowAlert = false
        this.alertText = ''
      },
      async submit () {
        //设置周报的reportType
        if (this.type === 'weekReview') {
          let items = document.getElementsByClassName('seqWeek')
          let i = 0
          for (; i < items.length; i++) {
            if (items[i].checked) {
              this.editDate.flag = items[i].id
            }
          }
        }
        //调整月的格式
        if (this.editDate.month < 10) {
          this.editDate.month = '0' + parseInt(this.editDate.month)
        }

        //调整年的格式
        // if(this.reportType===)

        // 设置useId和date和detail
        this.userId = this.userInfo.detail.userId
        console.log('userId:::::' + this.userInfo.detail.userId)

        this.date = this.editDate.year + '-' + this.editDate.month + '-' + this.editDate.flag
        console.log('this.reportType-----' + this.reportType)

        this.detail.academic = this.academic
        this.detail.item = this.item
        this.detail.project = this.project
        // 判断当前项目列表中是否有内容
        if (!this.checkNull(this.projectItem.projectName) && !this.checkNull(this.projectItem.projectCode) &&
          !this.checkNull(this.projectItem.effectiveWork) && !this.checkNull(this.projectItem.effect)) {
          this.saveItem()
        }
        if (this.userInfo.userId === undefined) {
          this.showAlert('登录超时，请重新登录！')
        } else if (this.modifyFlag) {
          console.log('修改')
          try {
            const result = await year.postUpdateYearReport({
              date: this.oldData.date,
              detail: this.detail,
              reportId: this.oldData.reportId,
              reportType: this.oldData.reportType,
              userId: this.userInfo.userId
            })
            console.log(result)
            if (result.code == 1) {
              this.showAlert(result.data)
              setTimeout(this.toView, 3000)
            } else {
              this.showAlert(result.message)
            }
          } catch (e) {
            console.log('ERROR' + e)
          }

        } else {
          if (this.editDate.flag === '00') {
            this.showAlert('请先选择【周数】')
            setTimeout(this.closeTip, 1500)
            //回到顶部
            // const target=document.getElementById('01')
            // target.scrollIntoView();
            return
          }
          try {
            const result = await year.postAddYearReport({
              date: this.date,
              detail: this.detail,
              reportId: '',
              reportType: this.reportType,
              userId: this.userInfo.userId
            })
            console.log(result)
            if (result.code == 1) {
              this.showAlert(result.data)
              setTimeout(this.toView, 3000)
            } else {
              this.showAlert(result.message)
            }
          } catch (e) {
            console.log('ERROR' + e)
          }
        }
      },
      //  渲染初始化
      async renderInit () {
        // console.log(this.$store.state.reviewType+'this.$store.state.reviewType')
        this.type = this.$store.state.reviewType
        switch (this.type) {
          case 'weekReview': {
            this.titleType = '周报'
            this.isShowWeekList = true
            this.editDate.flag = '00'
            this.reportType = 1
            break
          }
          case 'monthReview': {
            this.titleType = '月报'
            this.editDate.flag = '05'
            this.reportType = 2
            break
          }
          case 'yearReview': {
            this.titleType = '年报'
            this.editDate.flag = '12'
            this.reportType = 3
            break
          }
        }

        //初始化日期
        const date = new Date()
        const thisYear = date.getFullYear()
        let month = date.getMonth() + 1
        // let day = date.getDay() + 1
        this.editDate.year = thisYear
        if(this.reportType === 3){
          this.editDate.month = '12'
        }else {
          this.editDate.month = month
        }

        console.log(this.type + ':::::type')
        const modifyData = this.$store.state.reviewItem
        console.log('modifyData')
        console.log(modifyData)
        if (modifyData === '' || modifyData === undefined || modifyData === null || modifyData.length === 0) {
        } else {
          console.log('进入了修改状态')
          this.oldData = modifyData
          this.modifyFlag = true
          //修改状态下隐藏第几周的选择项
          this.isShowWeekList = false
          Object.assign(this.comReview, this.oldData.academic, this.oldData.project, this.oldData.item)
          this.academic.paperNum = this.comReview.paperNum
          this.academic.patentNum = this.comReview.patentNum
          this.academic.patentName = this.comReview.patentName
          this.academic.declarationName = this.comReview.declarationName
          this.academic.declarationNum = this.comReview.declarationNum
          this.academic.paperShare = this.comReview.paperShare
          this.academic.feeling = this.comReview.feeling

          this.project.projectSems = this.comReview.projectSems
          console.log(this.project.projectSems)
          this.project.softwareRight = this.comReview.softwareRight
          this.project.gameName = this.comReview.gameName
          this.project.gameNum = this.comReview.gameNum
          this.project.skillShare = this.comReview.skillShare

          this.item.procurementName = this.comReview.procurementName
          this.item.procurementNum = this.comReview.procurementNum
          this.item.managementName = this.comReview.managementName
          this.item.managementNum = this.comReview.managementNum
          this.item.fixedAssetsName = this.comReview.fixedAssetsName
          this.item.fixedAssetsNum = this.comReview.fixedAssetsNum
          this.item.labActivityPlan = this.comReview.labActivityPlan
        }
        this.$store.commit('recordReviewItem', '')
      }
    }
  }
</script>

<style scoped>
  textarea {
    align-items: center;
    margin: 0 auto;
    width: 86%;
  }

  .moreFun {
    width: 100%;
    text-align: right;
    display: block;
    color: #CCCCCC;
    font-size: 12px;
    margin-top: 5px;
  }

  .ids {
    color: #888888;
    margin-left: -30px;
  }

  .custumHeader {
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #35495e;
    border-bottom: 1px solid #bebebe;
    font-size: 20px;
    color: #333;

  }

  .back_button {
    margin-left: 5px;
    margin-right: 57%;
  }

  .items {
    display: inline-block;
    border: 1px solid;
    margin: 8px;
    height: auto;
    width: 18.5em;
    padding-top: 5px
  }

  .item_title {
    height: auto;
    width: auto;
    padding-left: 35%;
    font-size: larger;
    font-weight: bolder;
  }

  .review_number {
    height: auto;
    width: 40px;
    font-style: italic;
    padding: 0 1px;
  }

  .review_context {
    height: auto;
    width: auto;
    font-style: italic;
    margin-right: 5px;
  }

  .my_submit {
    height: 35px;
    width: 70px;
    color: #fff;
    background: #1abc9c;
    border: none;
    font-size: 16px;
    cursor: pointer;
    outline: 0;
    margin-left: 40%;
  }

  .clear_list_style:nth-child(2) > li {
    list-style: none;
  }

  .projectItem {
    border: 1px solid;
    border-radius: 7px;
    padding-left: 3px;
    width: 90%;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 2px;
    /*display: inline-block;*/
  }

  p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 2px;
  }
</style>
